<template>
	<view>
		<view class="u-page">
			<view class="top-box"> </view>
			<!-- !='' -->
			<block v-if="cuser.nickName">
				<view class=" top-banner flex-column">
					<!-- 登录数据显示 -->
					<view class="flex" style="height: 90rpx;width: 100%; margin-bottom: 40rpx;">
						<!-- 头像 -->
						<view class="" style="width: 90rpx;height: 90rpx;margin-right: 30rpx;">
							<image :src="cuser.avatarUrl" style="width: 100%;height: 100%;"></image>
						</view>
						<!-- 昵称 -->
						<view class="flex-column" style=" width: 300rpx; ">
							<view class="flex align-center">
								<view class=""
									style="margin-top: 8rpx;margin-bottom: 10rpx;font-size: 14px; font-family:PingFang-SC-Bold; font-weight: bold; color: #222222;  ">
									{{cuser.nickName}}
								</view>
								<!-- <view class="">
									<image :src="information.imglogo" mode=""
										style="width: 94rpx;height: 30rpx;margin-top: 10rpx;margin-left: 14rpx;">
									</image>
								</view> -->
							</view>
							<!-- 手机号 -->
							<view class=""
								style="font-size: 11px; font-family: PingFang-SC-Medium; font-weight: 500; color: #999999;">
								<!-- {{information.phone}} -->
							</view>
						</view>
						<!-- 豆豆 -->
						<view class="ww"
							style="width: 126rpx;height: 60rpx;   margin-left: 118rpx; background: #FE5734; border-radius: 15px 0px 0px 15px; margin-top: 20rpx;">
							<view class="" style="margin: 12rpx 0rpx 18rpx 30rpx;">
								<!-- <image src="../../static/my/bean@2x.png" mode="" style="width: 24rpx;height: 24rpx;"> -->
								</image>
								<text style="color: white;margin-left: 14rpx;">0</text>
							</view>
						</view>
					</view>
					<!-- 我的金额-->
					<view class="flex " style="width: 100%;  ">
						<view class="flex-column" style="width: 33.33%;  ">
							<view class=" b-8 chinese">
								我的余额(元)
							</view>
							<view class="num">
								<!-- {{information.balance}} -->
								0.00
							</view>
						</view>
						<view class=" flex-column     b-8 chinese" style="width: 33.33%;">
							<view class="b-8">
								累计所得
							</view>
							<view class="num">
								<!-- {{information.income}} -->
								0.00
							</view>
						</view>
						<view class=" flex-column     b-8 chinese" style="width: 33.33%;">
							<view class="b-8">
								已提总额(元)
							</view>
							<view class="num">
								<!-- {{information.get}} -->
								0.00
							</view>
						</view>
					</view>
				</view>
			</block>
			<block v-if="!cuser.nickName">
				<view class="top-banner flex-column">
					<!-- 点击登录 -->
					<view class="flex" style="height: 90rpx;width: 100%; margin-bottom: 40rpx;">
						<!-- 头像 -->
						<view class="" style="width: 90rpx;height: 90rpx;margin-right: 30rpx;">
							<image src="https://oss.xhm2006.com/Public/WechatApplet/notloggedin@2x.png"
								style="width: 100%;height: 100%;"></image>
						</view>
						<!-- 点击登录 -->
						<view class="flex-column" style="width: 300rpx; ">
							<view class="" @click="logo"
								style="margin-top: 8rpx;margin-bottom: 10rpx;font-size: 14px; font-family:PingFang-SC-Bold; font-weight: bold; color: #222222;  ">
								点击登录
							</view>
							<!-- 登陆后获得精彩内容 -->
							<view class=""
								style="font-size: 11px; font-family: PingFang-SC-Medium; font-weight: 500; color: #999999;">
								登陆后 获得更多精彩内容
							</view>
						</view>

						<!-- 豆豆 -->
						<view class="ww"
							style="width: 126rpx;height: 60rpx;   margin-left: 118rpx; background: #FE5734; border-radius: 15px 0px 0px 15px; margin-top: 20rpx;">
							<view class="" style="margin: 12rpx 0rpx 18rpx 30rpx;">
								<image src="https://oss.xhm2006.com/Public/WechatApplet/bean@2x.png" mode=""
									style="width: 24rpx;height: 24rpx;">
								</image>
								<text style="color: white;margin-left: 14rpx;">0</text>
							</view>
						</view>
					</view>
					<!-- 我的金额-->
					<view class="flex " style="width: 100%;  ">
						<view class="flex-column" style="width: 33.33%;  ">
							<view class="b-8 Medium">
								我的余额(元)
							</view>
							<view class="num">
								0.00
							</view>
						</view>
						<view class=" flex-column" style="width: 33.33%;">
							<view class="b-8 Medium">
								累计所得
							</view>
							<view class="num">
								0.00
							</view>
						</view>
						<view class=" flex-column" style="width: 33.33%;">
							<view class="b-8 Medium">
								已提总额(元)
							</view>
							<view class="num">
								0.00
							</view>
						</view>
					</view>
				</view>
			</block>
			<!-- 开通会员 -->
			<!-- 会员区域 是会员的时候就显示这个-->
			<view class="members   just-between" v-if="!information.logo">
				<view class="flex align-center just-center">
					<image src="https://oss.xhm2006.com/Public/WechatApplet/vip@2x.png"
						style="width: 34rpx;height: 34rpx;margin-right: 32rpx;">
					</image>
					<view class="vip-title">VIP 会员</view>
				</view>
				<view class="flex align-center just-center">
					<view class="vip">尊贵的小红帽会员</view>
					<!-- <image src="https://oss.xhm2006.com/Public/WechatApplet/into@2x.png" mode=""
						style="width: 12rpx;height: 22rpx;"></image> -->
				</view>
			</view>
			<view class="members   just-between" v-else>
				<view class="flex align-center just-center">
					<image src="https://oss.xhm2006.com/Public/WechatApplet/vip@2x.png" mode=""
						style="width: 34rpx;height: 34rpx;margin-right: 32rpx;">
					</image>
					<view class="vip-title">VIP 会员</view>
				</view>
				<view class="flex align-center just-center">
					<view class="vip">开通小红帽会员</view>
					<image src="https://oss.xhm2006.com/Public/WechatApplet/into@2x.png" mode=""
						style="width: 12rpx;height: 22rpx;"></image>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="x-banner">
				<view class="just-between" style="width: 100%;">
					<view class="">
						<x-title leftpx="40" wth="200rpx" title="服务"></x-title>
					</view>
					<view class="" @click="insertPhone">
						绑定手机号<u-icon name="arrow-right"></u-icon>
					</view>
				</view>

				<u-grid :col="4" :border="false">
					<u-grid-item v-for="(item,index) in serviceLIst" :key="index">
						<image class="print-img" :src="item.url" style="width: 66rpx;height: 66rpx;">
						</image>

						<view class="grid-text"> {{item.name}}</view>
					</u-grid-item>

				</u-grid>
			</view>
			<!-- #endif -->
			<view class="login-out flex aj-center" @click="logout">
				<view class="">
					退出登录
				</view>
			</view>
		</view>

		<u-tabbar :list="list" :iconSize=40 :mid-button="true" :before-switch="beforeSwitch"></u-tabbar>
	</view>
</template>

<script>
	import {
		GetUserBinding
	} from "@/api/xcx/my/apiAll.js";
	export default {
		data() {
			return {
				cuser: {},
				// 轮播图
				swiperList: [{
					ImageURL: '../../static/index/banner2.jpg'
				}],
				list: [],
				serviceLIst: [{
						id: 1,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/order@2x.png',
						name: '商品订单'
					},
					{
						id: 2,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/commodity@2x.png',
						name: '我的商品'
					},
					{
						id: 3,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/template@2x.png',
						name: '我的模板'
					},
					{
						id: 4,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/ad@2x.png',
						name: '我的广告'
					},
					{
						id: 5,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/collection@2x.png',
						name: '我的收藏'
					},
					{
						id: 6,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/collectcoupons@2x.png',
						name: '领卷中心'
					},
					{
						id: 7,
						url: 'https://oss.xhm2006.com/Public/WechatApplet/coupon@2x.png',
						name: '我的优惠卷'
					},
					{
						id: 8,
						// url: 'https://oss.xhm2006.com/Public/WechatApplet/opinion@2x.png',
						url: 'https://oss.xhm2006.com/Public/WechatApplet/coupon@2x.png',
						name: '意见反馈'
					},
				]
			}
		},
		onShow() {
			if (uni.getStorageSync('user')) {
				this.cuser = JSON.parse(uni.getStorageSync('user'))
			}   
		},
		onLoad() {
			this.list = this.$store.state.list
		},
		methods: {
			insertPhone() {
				// 先判断是否绑定手机号
				GetUserBinding().then(res => {
					// 绑定过手机号
					if (res.success) {
						uni.hideLoading()
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					} else {
						// 没绑定手机号
						uni.hideLoading()
						uni.navigateTo({
							url: '../myUserLogo/myUserLogo'
						})

					}
				})
			},
			// 底部导航
			beforeSwitch(index) {
				console.log(index);
				return true
			},
			logo() {
				uni.navigateTo({
					url: '../myUserLogo/myUserLogo'
				})
			},
			logout() {
				uni.clearStorageSync();
				this.cuser = {}


			}
		}
	}
</script>


<style>
	.u-drawer__scroll-view.data-v-17becaea {}

	.login-out {

		font-size: 14px;
		font-weight: 500;
		color: #FE5734;
		margin-top: 50rpx;
	}

	.top-box {
		width: 750rpx;
		height: 200rpx;
		background: #FE5734;
		/* position: relative; */
		box-sizing: border-box;
		overflow: hidden;
	}

	.top-banner {
		width: 690rpx;
		height: 276rpx;
		margin: -160rpx 30rpx 40rpx 30rpx;
		padding: 40rpx 0rpx 40rpx 40rpx;
		position: relative;
		background: #FFFFFF;
		/* background: #000000; */
		border-radius: 10px;
		/* border: 1px solid #000000; */
	}

	/* 我的钱财一栏 */
	.b-8 {
		font-size: 24rpx;
		color: #999999;
		margin-bottom: 16rpx;
	}

	.num {
		font-size: 36rpx;
		font-family: Cuprum-Bold;
		font-weight: bold;
		color: #222222;
	}

	/* <!-- 开通会员 --> */
	.members {
		width: 690rpx;
		height: 76rpx;
		margin: 0rpx 30rpx 38rpx 30rpx;
		background: linear-gradient(90deg, #F9BF8B 0%, #FFDDBF 100%);
		border-radius: 19px;
		padding: 22rpx 40rpx 22rpx 40rpx;
	}

	.vip-title {
		font-size: 12px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: #7B5533;
	}

	.vip {
		font-size: 12px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: #7B5533;
		margin-right: 22rpx;
	}

	/* 阴影边框 */
	/* .shadow {
		height: 20rpx;
		width: 750rpx;
		background: #FAFAFA;
	} */
	.u-mode-center-box {
		width: 462rpx !important;
		height: 530rpx !important;
		background-image: url(https://oss.xhm2006.com/Public/WechatApplet/Notifications@2x.png) !important;
		background-size: 100%;
		background-repeat: no-repeat
	}

	.service {
		margin: 50rpx 30rpx 0rpx 30rpx;
		/* padding: 40rpx; */
		padding-top: 40rpx;
		height: 213px;
		background: #FFFFFF;
		box-shadow: 0px 0px 8px 0px rgba(230, 230, 230, 0.5);
		border-radius: 10px;
	}

	.grid-text {
		font-size: 24rpx;
		margin-top: 24rpx;
		color: $u-type-info;
	}
</style>
